<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工信息管理</title>
    <!-- import CSS -->
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style type="text/css">
        body {
            background-image: url("/images/xh.webp");
        }

        .container {
            margin-top: 40px;
            padding: 20px; /* 增加内边距 */
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            background-color: #ffe6f2; /* 背景颜色 */
        }

        .container h2 {
            font-size: 36px; /* 更大字体 */
            font-family: 'Comic Sans MS', cursive; /* 更活泼的字体 */
            text-align: center;
            margin-bottom: 40px;
            color: orangered;
            text-shadow: 2px 2px 5px rgba(255, 69, 0, 0.7); /* 添加阴影效果 */
        }

        .navs {
            width: 100%;
            height: 60px; /* 增加导航条高度 */
            border-bottom: 2px solid rgb(255, 105, 180); /* 粉红色边框 */
            margin-bottom: 20px; /* 增加下边距 */
        }

        .navs button {
            float: left;
            width: 100px; /* 增加按钮宽度 */
            margin-top: 10px;
            background-color: #ff4d94; /* 粉红色按钮 */
            color: #ffffff; /* 按钮文字颜色 */
            border: none;
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 光标变为指针 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .navs button:hover {
            background-color: #e6007e; /* 悬停颜色 */
        }

        .navs .page {
            float: right;
            height: 60px;
            line-height: 60px;
            font-size: 20px; /* 增加字体大小 */
        }

        .pagination {
            margin: 10px 0; /* 增加分页条间距 */
        }

        table th, td {
            text-align: center;
            font-size: 16px; /* 增加字体大小 */
        }

        .form-check-input {
            position: relative;
        }

        .col-sm-2 {
            width: 90px;
        }

        .btn-warning {
            background-color: #ffb84d; /* 修改按钮背景色 */
            border: none; /* 去除边框 */
            color: white; /* 按钮文字颜色 */
        }

        .btn-danger {
            background-color: #ff4d4d; /* 删除按钮背景色 */
            border: none; /* 去除边框 */
            color: white; /* 按钮文字颜色 */
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 如果errMessage非空，显示警告信息 -->
    <c:if test="${not empty errMessage}">
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <strong>Warning!</strong> ${{errMessage}}
        </div>
    </c:if>
    <h2>员工信息管理系统</h2>
    <div class="navs" style="text-align: center;">
        <div class="page" style="float: left; font-size: 20px;">
            欢迎<span style="color:red; font-weight:bold;">${admin.name}</span>小可爱
        </div>
        <!-- 退出登录按钮 -->
        <div class="page">
            <a href="system?method=logout" style="text-decoration:none;color: #c82333;">退出登录</a>
        </div>
    </div>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">序号</th>
            <th scope="col">工号</th>
            <th scope="col">姓名</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
            <th scope="col">身份证号</th>
            <th scope="col">工作地址</th>
            <th scope="col">入职时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 如果empList非空，遍历显示员工数据 -->
        <c:if test="${not empty empList}">
            <c:forEach items="${empList}" var="employee"  varStatus="status">
                <tr>
                    <th scope="row">${status.count}</th>
                    <td>${employee.workNo}</td>
                    <td>${employee.name}</td>
                    <td>${employee.gender}</td>
                    <td>${employee.age}</td>
                    <td>${employee.idCard}</td>
                    <td>${employee.workAddress}</td>
                    <td>${employee.entryDate}</td>
                    <td>
                        <button type="button" class="btn btn-warning" data-id="${employee.id}"
                                data-workno="${employee.workNo}"
                                data-name="${employee.name}"
                                data-gender="${employee.gender}"
                                data-age="${employee.age}"
                                data-idcard="${employee.idCard}"
                                data-workaddress="${employee.workAddress}"
                                data-entrydate="${employee.entryDate}"
                                data-toggle="modal" data-target="#updateEmpModal">
                            修改
                        </button>
                        <button type="button" class="btn btn-danger"
                                data-id="${employee.id}"
                                data-toggle="modal" data-target="#deleteEmpModal">删除
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
        </tbody>
    </table>


    <!-- 添加员工的模态框 -->
    <form action="employee?method=addEmployee" method="post">
        <div class="modal fade" id="addEmpModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 15px; border: 2px solid #ff4d94;">
                    <div class="modal-header" style="background-color: #ffe6f2;">
                        <h5 class="modal-title" id="exampleModalLabel" style="color: orangered;">添加员工信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <label for="workNo" class="col-sm-3 col-form-label">工号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="workNo" name="workNo" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-3 col-form-label">姓名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="form-group row" style="line-height: 40px;">
                            <label class="col-sm-3 col-form-label">性别</label>
                            <div class="col-sm-3">
                                <input class="form-check-input" type="radio" name="gender" id="sexRadio1" value="男"
                                       checked>
                                <label class="form-check-label">男</label>
                            </div>
                            <div class="col-sm-3">
                                <input class="form-check-input" type="radio" name="gender" id="sexRadio2" value="女">
                                <label class="form-check-label">女</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="age" class="col-sm-3 col-form-label">年龄</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" id="age" name="age" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="idCard" class="col-sm-3 col-form-label">身份证号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="idCard" name="idCard" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="workAddress" class="col-sm-3 col-form-label">工作地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="workAddress" name="workAddress" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" style="background-color: #ff4d94; color: white;"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="btn" style="background-color: #ff69b4; color: white;">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- 修改的模态框 -->
    <form action="employee?method=updateEmployee" method="post">
        <div class="modal fade" id="updateEmpModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 15px; border: 2px solid #ff4d94;">
                    <div class="modal-header" style="background-color: #ffe6f2;">
                        <h5 class="modal-title" id="updateModalLabel" style="color: orangered;">修改员工信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <label for="workNo" class="col-sm-3 col-form-label">工号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="workNo1" name="workNo" required>
                            </div>
                        </div>
                        <input type="hidden" id="updateEmp_id" name="id"/>
                        <div class="form-group row">
                            <label for="name" class="col-sm-3 col-form-label">姓名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name1" name="name" required>
                            </div>
                        </div>
                        <div class="form-group row" style="line-height: 40px;">
                            <label class="col-sm-3 col-form-label">性别</label>
                            <div class="col-sm-3">
                                <input class="gender" type="radio" name="gender" value="男" checked>
                                <label class="form-check-label">男</label>
                            </div>
                            <div class="col-sm-3">
                                <input class="gender" type="radio" name="gender" value="女">
                                <label class="form-check-label">女</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="age" class="col-sm-3 col-form-label">年龄</label>
                            <div class="col-sm-9">
                                <input type="number" class="form-control" id="age1" name="age" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="idCard" class="col-sm-3 col-form-label">身份证号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="idCard1" name="idCard" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="workAddress" class="col-sm-3 col-form-label">工作地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="workAddress1" name="workAddress" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <%--@declare id="entrydate"--%><label for="entrydate"
                                                                  class="col-sm-3 col-form-label">入职时间</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="entrydate1" name="entrydate" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" style="background-color: #ff4d94; color: white;"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="btn" style="background-color: #ff69b4; color: white;">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- 删除模态框 -->
    <form id="deleteForm">
        <div class="modal fade" id="deleteEmpModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 15px; border: 2px solid #ff4d94;">
                    <div class="modal-header" style="background-color: #ffe6f2;">
                        <h5 class="modal-title" id="deleteModalLabel" style="color: orangered;">删除提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <input type="hidden" id="emp_id" name="id" value=""/>
                    <div class="modal-body">
                        确认删除序号为<span id="del_id" style="color:red;"></span>的员工信息吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" style="background-color: #ff4d94; color: white;"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn" style="background-color: #ff69b4; color: white;"
                                onclick="deleteEmployee()">确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>


    <!-- 添加按钮和分页布局  -->
    <div class="navs" style="margin-bottom: 20px;">
        <button type="button" class="btn" style="background-color: #ff69b4; color: white;" data-toggle="modal"
                data-target="#addEmpModal">添加
        </button>
        <div class="page">
            <ul class="pagination">
                <%
                    int currentPage = Integer.parseInt((String) request.getAttribute("page")); // 当前页码
                    int totalPage = Integer.parseInt((String) request.getAttribute("totalPage")); // 总页数
                    int startPage = Math.max(1, currentPage - 2);
                    int endPage = Math.min(totalPage, currentPage + 2);
                %>

                <!-- 上一页按钮 -->
                <li class="page-item <%= currentPage == 1 ? "disabled" : "" %>">
                    <a class="page-link" href="employee?method=empList&page=<%= currentPage - 1 %>"
                       style="background-color: #ff4d94; color: white;">上一页</a>
                </li>

                <!-- 页码链接 -->
                <% for (int i = startPage; i <= endPage; i++) { %>
                <li class="page-item <%= currentPage == i ? "active" : "" %>">
                    <a class="page-link" href="employee?method=empList&page=<%= i %>"
                       style="background-color: #ff4d94; color: white;">
                        <%= i %>
                    </a>
                </li>
                <% } %>

                <!-- 下一页按钮 -->
                <li class="page-item <%= currentPage == totalPage ? "disabled" : "" %>">
                    <a class="page-link" href="employee?method=empList&page=<%= currentPage + 1 %>"
                       style="background-color: #ff4d94; color: white;">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //定义删除员工的方法
    function deleteEmployee() {
        //获取id的input中的值
        const id = $("#emp_id").val();
        console.log("id=" + id);
        //关闭删除模态框
        $('#deleteEmpModal').modal('hide');
        $.ajax({
            //请求方式
            type: "POST",
            //请求url
            url: "employee?method=deleteEmployee",
            //请求数据
            // data:{id: id},
            data: $("#deleteForm").serialize(),//获取表单中的数据
            //请求结果
            success: function (res) {
                //将结果转成json对象
                const result = $.parseJSON(res);
                console.log(result[0].code + "--" + result[0].message)
                if (result[0].code == 200) {
                    alert(result[0].message);
                    window.location.href = "employee?method=empList";
                } else {
                    alert(result[0].message);
                }
            }
        });
    }

    //修改模态框数据获取
    /*(document.getElementById("updateEmpModal")).on('show.bs.modal',function (event) {
        alert("");
    });*/
    $("#updateEmpModal").on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        console.log(button);
        const id = button.data('id');
        const workNo = button.data('workno');
        const name = button.data('name');
        const gender = button.data('gender');
        const age = button.data('age');
        const idCard = button.data('idcard');
        const workAddress = button.data('workaddress');
        const entrydate = button.data('entrydate');
        const modal = $(this);

        // modal.find('.modal-title').text('修改员工信息');
        modal.find('#updateEmp_id').val(id);
        modal.find('#workNo1').val(workNo);
        modal.find('#name1').val(name);
        const genders = modal.find(".gender");
        //修改员工信息时 性别 数据的匹配
        for (let i = 0; i < genders.length; i++) {
            const obj = $(genders.get(i));
            if (gender == obj.val()) {
                $("input[type='radio'][value='" + obj.val() + "']").click();
                break;
            }
        }
        modal.find('#age1').val(age);
        modal.find('#idCard1').val(idCard);
        modal.find('#workAddress1').val(workAddress);
        modal.find('#entrydate1').val(entrydate);
    });

    //获取修改模态框的数据
    $("#deleteEmpModal").on('show.bs.modal', function (event) {
        //var result = $(event.relatedTarget);
        const button = $(event.relatedTarget);
        const id = button.data('id');
        //获取结果中的 id值
        console.log(id);
        const modal = $(this);
        //将结果赋值给 id = del_id的span中
        modal.find("#del_id").text(id);
        modal.find("#emp_id").val(id);
        // modal.find("#emp_id").val(20);
    });

</script>
</html>
